
<template functional>
    <a-sub-menu

            v-if="props.menuInfo.permission.permissionVisible"
            :key="JSON.stringify(props.menuInfo.permission)"
    >
    <span slot="title">
      <a-icon :type="props.menuInfo.permission.permissionIcon" /><span>{{ props.menuInfo.permission.permissionName }}</span>
    </span>

        <template v-if="props.menuInfo.children.length > 0" v-for="item in props.menuInfo.children">
            <a-menu-item
                    v-if="item.permission.permissionType == 'FUNCTION' && item.permission.permissionVisible "
                    :key="JSON.stringify(item.permission)"

            >
                <a-icon :type="item.permission.permissionIcon" />
                <span>{{ item.permission.permissionName }}</span>
            </a-menu-item>
            <SubMenu
                    v-else
                    :menuInfo="item"
            />
        </template>
    </a-sub-menu>
</template>
<script>
    export default {
        name:'SubMenu',

        props: {
            menuInfo:{
                type:Object,
                default:()=>{
                    return {
                        permission:{
                        },
                        children:[]
                    }
                }
            }
        },
        mounted(){
        }
    };
</script>